<template>
 <div>
    <div class="swiper-list">
        <span class="swiper-span">
            <img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png">
        </span>        
        <p class="swiper-p">本周热门榜单</p>
    </div>
    <div class="wrapper">
    <swiper :options="swiperOption">
           <router-link tag="div" :to="'/Hotspots/'+item.id" class="swiper-slide" v-for="item in list" :key="item.id">
          
                <div class="mp-hotsale-tag" v-if="item.top">
                <img class="mp-hotsale-tagimg" :src="item.imgTOP" alt="南京总统府">
                </div>               
                    <div class="swiper-img">
                        <img :src="item.imgUrl">
                    </div>
                    <div class="swiper-wz">
                        <p>{{item.title}}</p>
                        <p><span class="mpg-price">¥<em class="mpg-price-num">{{item.pice}}</em></span>起</p>
                    </div>            
           </router-link>  
        </swiper>
    </div>
 </div>
</template>

<script>
export default {
    name:'HomeSwiperlist',
      props: {
        list:Array
    },
    data(){
        return{
            swiperOption:{
               slidesPerView: 3,
                spaceBetween: 0,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            }           
        }
    },
    computed: {
        showSwiper(){
            return this.list.length
        }
        
    }

}
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active {
    opacity: 1;
    background: #ffffff !important ;
}
.wrapper{
   
    width :100%;   
    background: white;
    padding-bottom 0.2rem;
}
.swi-img{
    width 100%;
}
.swiper-span, .swiper-p{
float left
}
.swiper-list{
      height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.3rem;
    background: white;
    margin-top: 0.1rem;
    padding-bottom 0.2rem;
}
.swiper-span img{
    width 100%;
     margin-top: -0.1rem;
}
.swiper-span{
    width: 0.3rem;
    margin-right: 0.1rem;
    margin-left: 0.1rem;
   
}
.swiper-img{
    width 2.3rem;
    height 2.3rem;
    margin: 0 auto;
}
.swiper-img img{
    width 100%
}
.swiper-slide{
    margin-left: 0px;
    margin-right 0px;
    
}

.swiper-wz p:nth-child(1){
    color: #212121;
    font-size: .24rem;
    line-height: .4rem;
    text-align: center;
    margin-top: 0.05rem;
}
.swiper-wz p:nth-child(2){
    color: #212121;
    font-size: .24rem;
    line-height: .4rem;
    text-align: center;
}
.mpg-price{
    color #ff8300;
        font-size: 0.3rem;
}
.mp-hotsale-tag{
     width: 0.8rem;
    position: absolute;
    left: 0.1rem;
    top -5px
}
.mp-hotsale-tagimg{
    width 100%
   
}
.swiper-container{
    overflow initial;
}
</style>
